<template>
	<view class="">
		<view class="banner">
			<image src="../../static/image/mine/discount/center01.png" mode="widthFix"></image>
		</view>
		<!-- <view class="list">
			<view class="list_discount" v-for="(item,index) in discountList" :key="index">
				<image src="../../static/image/mine/discount/no_use.png" mode=""></image>
				<view class="list_content">
					<view class="price">
						￥
						<text>{{item.price}}</text>
					</view>
					<view class="info">
						<view class="info_title">{{item.title}}</view>
						<view class="info_detail">订单满{{item.use_price}}元可用</view>
						<view class="info_date">{{item.start_time}}-{{item.end_time}}</view>
					</view>
					<view class="touse">
						<view class="btn">
							去使用
							<view class="over_time">仅剩{{item.residue_day}}天</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="list" v-for="(item,index) in discountList">
			<image src="../../static/image/mine/index/order_discount1.png" mode=""></image>
			<view class="list_content">
				<view class="price">
					<view class="price_p">
						￥<text>{{item.price}}</text>
					</view>
					<view class="price_rule">
						{{item.rule}}
					</view>
				</view>
				<view class="info">
					<view class="info_title">{{item.title}}</view>
					<!-- <view class="info_detail">订单满20元可用</view> -->
					<view class="info_date">{{item.start_time}}-{{item.end_time}}</view>
				</view>
				<view class="touse">
					<view class="btn">
						立即领取
						<view class="over_time">仅剩4天</view>
					</view>
				</view>
			</view>
		</view>
		<view class="look" @tap="todiscount">
			<image src="../../static/image/mine/discount/look.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				discountList: [
					{
						price:'2',
						title: '新人券',
						use_price: '20',
						rule: '订单满30元使用',
						start_time: '2019.12.20',
						end_time: '2020.02.03',
						residue_day: '3'
					},
					{
						price:'2',
						title: '新人券',
						use_price: '20',
						rule: '订单满30元使用',
						start_time: '2019.12.20',
						end_time: '2020.02.03',
						residue_day: '3'
					},
					{
						price:'2',
						title: '新人券',
						use_price: '20',
						rule: '订单满30元使用',
						start_time: '2019.12.20',
						end_time: '2020.02.03',
						residue_day: '3'
					}
				]
			}
		},
		methods: {
			todiscount () {
				uni.navigateTo({
					url: '/pageD/discount/discount'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.banner {
		width: 100%;
		height: 270upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 690upx;
			// box-shadow: 0 0 10upx 0 #fc5a2f;
		}
	}
	.list {
		width: calc(100% - 60upx);
		height: 186upx;
		margin: auto;
		margin-top: 20upx;
		position: relative;
		image {
			width: 100%;
			height: 100%;
		}
		.list_content {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			.price {
				width: 210upx;
				height: 140upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				// font-size: 32upx;
				// color: #ffffff;
				// text-align: center;
				// line-height: 140upx;
				.price_p {
					font-size: 28upx;
					color: #FFFFFF;
					text {
						font-size: 40upx;
						font-weight: bold;
					}
				}
				.price_rule {
					margin-top: 10upx;
					font-size: 24upx;
					color: #FFFFFF;
					white-space: nowrap;
				}
			}
			.info {
				width: 320upx;
				height: 100%;
				padding: 20upx 0;
				padding-left: 25upx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.info_title {
					font-size: 28upx;
					color: #000;
					line-height:28upx;
				}
				.info_detail {
					font-size: 24upx;
					color: #333333;
					line-height: 24upx;
				}
				.info_date {
					margin-top: 20upx;
					font-size: 24upx;
					color: #333333;
					line-height: 24upx;
				}
			}
				.touse {
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;
					height: 100%;
					.btn {
						position: relative;
						width: 144upx;
						height: 52upx;
						border-radius: 26upx;
						// background: linear-gradient(to right, #f73e2f 0%, #fc5b2f 100%);
						background: linear-gradient(to right, #fe7b71 0%,#f73e2f 100%);
						// box-shadow: 0 0 10upx 0 #fc5b2f;
						font-size: 24upx;
						color: #ffffff;
						text-align: center;
						line-height: 52upx;
						.over_time {
							position: absolute;
							right: 0;
							top: -60upx;
							font-size: 24upx;
							color: #f73e2f;
						}
					}
				}
			.getdiscount {
				width: 120upx;
				// background-color: #f73e2f;
				background: linear-gradient(to right, #fe7b71 0%,#f73e2f 100%);
				height: 40upx;
				border-radius: 20upx;
				text-align: center;
				line-height: 40upx;
				color: #FFFFFF;
				font-size: 24upx;
			}
		}
	}
// .list_discount {
// 	width: calc(100% - 60upx);
// 	height: 186upx;
// 	margin: auto;
// 	margin-top: 20upx;
// 	position: relative;
// 	image {
// 		width: 100%;
// 		height: 100%;
// 	}
// 	.list_content {
// 		width: 100%;
// 		height: 100%;
// 		position: absolute;
// 		left: 0;
// 		top: 0;
// 		display: flex;
// 		.price {
// 			width: 186upx;
// 			height: 186upx;
// 			font-size: 32upx;
// 			color: #ffffff;
// 			text-align: center;
// 			line-height: 186upx;
// 			text {
// 				font-size: 40upx;
// 				font-weight: bold;
// 			}
// 		}
// 		.info {
// 			width: 330upx;
// 			height: 100%;
// 			padding-left: 25upx;
// 			padding-top: 40upx;
// 			box-sizing: border-box;
// 			.info_title {
// 				font-size: 32upx;
// 				color: #333333;
// 				font-weight: bold;
// 				line-height: 32upx;
// 			}
// 			.info_detail {
// 				font-size: 24upx;
// 				color: #333333;
// 				line-height: 24upx;
// 				margin-top: 14upx;
// 				margin-bottom: 20upx;
// 			}
// 			.info_date {
// 				font-size: 24upx;
// 				color: #333333;
// 				line-height: 24upx;
// 			}
// 		}
// 		.touse {
// 			display: flex;
// 			align-items: center;
// 			justify-content: center;
// 			flex: 1;
// 			height: 100%;
// 			.btn {
// 				position: relative;
// 				width: 144upx;
// 				height: 52upx;
// 				border-radius: 26upx;
// 				background: linear-gradient(to right, #f73e2f 0%, #fc5b2f 100%);
// 				box-shadow: 0 0 10upx 0 #fc5b2f;
// 				font-size: 24upx;
// 				color: #ffffff;
// 				text-align: center;
// 				line-height: 52upx;
// 				.over_time {
// 					position: absolute;
// 					right: 0;
// 					top: -60upx;
// 					font-size: 24upx;
// 					color: #f73e2f;
// 				}
// 			}
// 		}
// 	}
// }
.look {
	width: 119upx;
	height: 126upx;
	position: fixed;
	right: 0;
	bottom: 300upx;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
